<template>
  <el-dialog
    title="审核不通过记录"
    :visible.sync="visible"
    width="660px"
    append-to-body
  >
    <avue-crud
      ref="crud"
      :data="tableData"
      :table-loading="tableLoading"
      :option="auditFailOption"
    >
      <template v-slot:menu="{ row }">
        <el-button
          type="text"
          @click="showRemarkDialog(row.diaryId)"
        >
          备注记录
        </el-button>
      </template>
    </avue-crud>
    <remarkRecordDialog
      :id="id"
      v-model="remarkVisible"
    ></remarkRecordDialog>
  </el-dialog>
</template>
<script>
import { getAuditFailRecord } from '@/api/core/adopt';
import { auditFailOption } from '@/const/crud/pet/adoptDiary';
import remarkRecordDialog from './remarkRecordDialog.vue';
export default {
  components: {
    remarkRecordDialog,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
    },
    petId: {
      type: String,
    },
  },
  data() {
    return {
      auditFailOption,
      remarkVisible: false,
      tableLoading: false,
      tableData: [],
      id: '',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      } else {
        this.tableData = [];
      }
    },
  },
  methods: {
    getList() {
      getAuditFailRecord(this.userId, this.petId)
        .then((response) => {
          this.tableData = response.data.data;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    showRemarkDialog(id) {
      this.id = id;
      this.remarkVisible = true;
    },
  },
};
</script>
